<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>w3c导航条、弹性容器</title>
    <link rel="stylesheet" href="/css/reset.css"> <!-- 清除浏览器默认样式 -->
    <link rel="stylesheet" href="/css/public.css">

    <style>
        .nav{
            background-color: rgb(232, 231, 227);
            width: 1221px;
            margin: 50px auto;
            display: flex;
            flex-direction: row; /* 容器元素方向、默认也是row */
        }
        .nav li{
            /* border: 1px solid red; */
           /*flex-grow: 0;  自动伸展*/
           /* flex-shrink: 0; */
           line-height: 48px;
           /* height: 48px; */
            flex: 1 1 auto;/* 简写：flex: 增长(flex-grow) 缩减(flex-shrink) 基础(flex-basis);*/       
        }
        .nav a{
            display: block;
            font-size: 16px;
            text-align: center;
            cursor: pointer; /* 按钮变小手 */
            text-decoration: none; /* 清除a下划线 */
            color: rgb(127, 127, 127);
        }
        .nav a:hover{
            background-color: #636363;
            color: #fff;
        }

        /* ------------------其他测试------------------ */
        .t_ul{
            border: 1px solid red;
            width: 700px;
            height: 500px;
            line-height: 48px;
            margin: 50px auto;
            display: flex;
            text-align: center;
            flex-wrap: wrap;    /*设置弹性元素是否在容器中自动换行*/
            justify-content: center;    /*分配左右(元素如何对齐、空白分布)*/
            align-items: flex-start;    /*分配上下(元素如何对齐)*/
            align-content:space-between;  /* 辅轴上下空白分布、与justify-content类似 */
        }

        .t_ul li{
            width: 200px; 
            flex-shrink: 0;
        }

        .t_ul li:nth-child(1){
            align-self: stretch; /* 与align-items一样用来覆盖父元素的align-items属性单独给元素设置 */
            background-color: #bfa;
        }
        .t_ul li:nth-child(2){
            background-color: pink;
        }
        .t_ul li:nth-child(3){
            background-color: orange;
        }
        .t_ul li:nth-child(4){
            background-color: orchid;
        }
        .t_ul li:nth-child(5){
            background-color: plum;
        }
        
        .a{
            border: 1px solid red;
            margin: auto;
            width: 700px;
            height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .b{
            border: 1px solid red;
            width: 200px;
            height: 200px;
        }

    </style>

</head>
<body>
    
    <ul class="nav"> <!-- 导航条 -->
        <li><a href="">HTML/CSS</a></li>
        <li><a href="">Browser Side</a></li>
        <li><a href="">Server Side</a></li>
        <li><a href="">Programming</a></li>
        <li><a href="">XML</a></li>
        <li><a href="">Web Building</a></li>
        <li><a href="">Reference</a></li>
    </ul>

    <ul class="t_ul">
        <li>1</li>
        <!-- <li>2<div>2</div></li>
        <li>3<div>3</div><div>3</div></li>
        <li>1</li>
        <li>2<div>2</div></li> -->
    </ul>
    

    <div class="a">
        <div class="b">元素居中</div>
    </div>
</body>
</html>